<template>
  <zm-dialog :title="Ttitle" :visible.sync="value" append-to-body :before-close="dialogClose" :close-on-click-modal="false" :keep-alive="true">
    <zm-form :model="form" ref="form" :rules="rules" inline label-width="120px">
      <el-form-item label="标签名称：" prop="name">
        <zm-input v-model="form.name" :maxlength="6" class="w200" />
      </el-form-item>
      <el-form-item label="标签样式选择：" prop="type">
        <div class="tagBox-bgc w450 pl10 h100 pt20 pb20">
          <el-radio-group v-model="form.type">
            <el-radio v-for="item in styleOptions" :value="item.value" :label="item.value" :key="item.value" class="mr15 mb10">
              <div :class="item.style">标签名称</div>
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="标签预览：" prop="tagPrev" v-if="form.name">
        <div :class="styleOptions[+form.type - 1].style">{{form.name}}</div>
      </el-form-item>
    </zm-form>
    <div slot="footer" class="tr">
      <el-button @click="dialogClose">返回</el-button>
      <zm-button @click="submit" t="submit" />
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import { styleOptions } from '../const'
import api from '@/api'
export default {
  name: 'NewTag',
  components: {

  },
  mixins: [dialogMixin],
  data () {
    return {
      form: {
        name: '',
        type: '1'
      },
      styleOptions,
      rules: {
        name: {
          required: true,
          message: '请输入标签名称',
          trigger: 'blur'
        }
      }
    }
  },
  computed: {
    Ttitle () {
      return this.obj.id ? '编辑标签' : '新建标签'
    }
  },
  created () {
    if (this.obj.id) {
      this.getInfo()
    }
  },
  methods: {
    async getInfo () {
      this.form = await api.commodityLabel.getInfo({id: this.obj.id})
    },
    async submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return

      const params = this.form
      await api.commodityLabel.create(params)
      this.$emit('afterSave')
      this.$message.success('操作成功')
      this.$emit('afterSave')
      this.dialogClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.lh30 {
  height: 30px;
  line-height: 30px;
}
</style>
